<template>
	<view>
		<view class="header">
			<view class="d-flex ">
				<view class="flex-1 m-3">发票类型</view>
				<view class="fs28 m-3 gray">增值税电子普通发票</view>
			</view>
			<view class="d-flex ">
				<view class="flex-1 m-3 ">抬头类型</view>
				<view class="d-flex mr-3"  :class="{'select':currentindex==index}"  @tap="IsCheck(index)" v-for="(item,index) in type" :key="index">
					<image  mode="widthFix" :src="currentindex==index ?isCheckfalse:isChecktrue"
						style="width: 35rpx;margin-top: 30rpx;">
						<view class=" ml-2 type">{{item.name}}</view>
				</view>
			</view>
			<!-- 个人模式下 显示 -->
			<view class="" v-if="currentindex==0">
			<view class="d-flex ">
				<view class="flex-1 m-3">发票抬头</view>
				<view class="fs28 mt-3 mr-1 gray">填写需要开具发票的姓名</view>
				<image class="mt-4 mr-2" src="@/static/img/user/right.png" mode="widthFix" style="width: 15rpx;">
			</view>
			<view class="d-flex ">
				<view class="flex-1 m-3">发票类型</view>
				<view class="fs28 m-3">增值税电子普通发票</view>
			</view>
			<view class="d-flex ">
				<view class="flex-1 m-3">设置为默认抬头</view>
				<image src="@/static/img/login/yiyuedu-xuanzhong.png" mode="widthFix"
					style="width: 40rpx;margin: 30rpx;">
			</view>
			</view>

			<!-- 企业模式下显示 -->
			<view class="" v-else>
				<view class="d-flex ">
					<view class="m-3">发票抬头</view>
					<input type="text" placeholder="请输入">
				</view>
				<view class="d-flex">
					<view class="m-3">纳税人识别编号</view>
					<input type="text" placeholder="请输入">
				</view>
				<view class="d-flex">
					<view class="m-3">公司地址</view>
					<input type="text" placeholder="请输入">
				</view>
				<view class="d-flex">
					<view class="m-3">公司电话</view>
					<input type="number" placeholder="请输入">
				</view>
				<view class="d-flex">
					<view class="m-3">开户银行</view>
					<input type="text" placeholder="请输入">
				</view>
				<view class="d-flex">
					<view class="m-3">开户账号</view>
					<input type="number" placeholder="请输入">
				</view>
			</view>
		</view>
		<view class="header">
			<view class="d-flex ">
				<view class="flex-1 m-3">发票内容</view>
				<view class="d-flex">
					<image src="@/static/img/login/yiyuedu-xuanzhong.png" mode="widthFix"
						style="width: 40rpx;margin-top: 30rpx;margin-right: 10rpx;">
						<view class="fs28 mt-3 mr-3">明细</view>
				</view>

			</view>
		</view>
		<!--  -->

		<view class="footer">
			<button class="btn">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecktrue:"/static/img/login/yiyuedu-weixuanzhong.png",
				isCheckfalse:"/static/img/login/yiyuedu-xuanzhong.png",
				currentindex: 0,
				type:[{
					name:'个人或单位',
				},{
					name:'企业'
				}],
			};
		},
		methods: {
			
			IsCheck(index) {
				this.currentindex = index;
			},
		},
	}
</script>

<style lang="scss">
	.type{
		margin-top: 30rpx;
	}
	.select {
		color: #e80909;
		// border-bottom: 4rpx solid #e80909;
	}
	page {
		background-color: #f5f5f5;
	}

	.header {
		background-color: white;
		width: 96%;
		height: 100%;
		margin: 20rpx auto;
		border-radius: 20rpx;
	}

	.footer {
		position: fixed;
		width: 98%;
		bottom: 50rpx;

		.btn {
			margin: 40rpx;
			border-radius: 50rpx;
			background-color: #e80909;
			color: white;
		}
	}

	input {
		margin-top: 30rpx;
	}
</style>
